<template>
  <div>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="未完成" name="1">
        <p v-for="(item,index) in $store.state.text" :key="index">
          <input type="checkbox" @click="goYes(index)" />
          {{item}}
          <button @click="goQx(index)">取消</button>
        </p>
      </van-collapse-item>

      <van-collapse-item title="已完成" name="2">
        <p v-for="(item,index) in $store.state.yestext" :key="index">
          <input type="checkbox" @click="goNo(index)" checked="checked" />
          {{item}}
          <span>2021/2/25</span>
        </p>
      </van-collapse-item>
      <van-collapse-item title="已取消" name="3">
        <p v-for="(item,index) in $store.state.qxtext" :key="index">
          {{item}}
          <button @click="goNo2(index)">取消</button>
        </p>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: "demo",
  props: [],
  components: {},
  data() {
    return {
      activeNames: ["1"]
    };
  },
  computed: {},
  watch: {},
  methods: {
    goYes(index) {
      this.$store.commit("goYes", index);
    },
    goNo(index) {
      this.$store.commit("goNo", index);
    },
    goQx(index) {
      this.$store.commit("goQx", index);
    },
    goNo2(index) {
      this.$store.commit("goNo2", index);
    }
  },

  beforeCreate() {},

  created() {},

  beforeMount() {},

  mounted() {},

  beforeUpdate() {},

  updated() {},

  activated() {},

  deactivated() {},

  beforeDestroy() {},

  destroyed() {}
};
</script> 


<style lang='scss' scoped>
.van-collapse-item{
    background-color: palevioletred;
    display: block;
    
}p{
    display: flex;
}
span{
    display: block;
    margin-left: 300px;
}
button{
    margin-left: 300px;
}
</style>
